<template>
  <div class="left-page">
    <h1>{{ title }}</h1>
    <div class="left-page_button" v-if="buttonList.length > 0">
      <el-button
        v-for="(btn, index) in buttonList"
        :key="index"
        size="small"
        :icon="btn.icon"
        :type="btn.type"
        text
        @click="funButtonEvent(btn.fun)"
        >{{ btn.name }}</el-button
      >
    </div>
    <slot />
  </div>
</template>

<script setup lang="ts">
const props = defineProps({
  title: {
    type: String,
    requierd: true,
    default: "",
  },
  buttonList: {
    type: Array,
    default: [],
  },
});
const emit = defineEmits(["funButtonEvent"]);
const funButtonEvent = (val: any) => {
  emit("funButtonEvent", val);
};
</script>

<style scoped lang="scss">
.left-page {
  h1 {
    font-size: 14px;
    font-weight: 600;
    background-color: var(--ep-color-primary);
    color: #fff;
    border-radius: 4px 4px 0 0;
    padding: 10px 5px;
  }
  &_button {
    width: auto;
    background-color: var(--ep-color-primary-light-9);
    padding: 5px 5px;
    margin-bottom: 10px;
  }
}
</style>
